<template>
  <div class="main">
    <div
      class="template-wrapper"
      v-for="(template, index) in templates"
      :key="index"
    >
      <div class="template" @tap="goback(template)">
        <image class="cover" :src="template.picture" mode="aspectFill"> </image>
        <view class="info">
          <view class="name">{{ template.title }}</view>
          <view class="price">{{ "￥" + template.price }}</view>
        </view>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { listTemplate } from "@/api/template";
import { searchVO, Template } from "@/typings";
import Vue from "vue";

export default Vue.extend({
  data() {
    return {
      templates: [] as Template[],
      searchVO: { pageNum: 1, pageSize: 10 } as searchVO,
      finish: false,
    };
  },
  onLoad() {
    this.loadTemplate();
  },
  methods: {
    loadTemplate() {
      if (!this.finish) {
        listTemplate(this.searchVO).then((res) => {
          console.log(res);
          if (res.pageSize > res.size) {
            this.finish = true;
          }
          this.searchVO.pageNum++;
          this.templates.push(...res.list);
        });
      }
    },
    goback(template: Template) {
      let that: any = this;
      const eventChannel = that.getOpenerEventChannel();
      eventChannel.emit("templateSelect", template);
      uni.navigateBack({});
    },
  },
  onReachBottom() {
    this.loadTemplate();
  },
});
</script>
<style lang="scss" scoped>
.main {
  padding-bottom: 200rpx;
}
.template-wrapper {
  display: inline-block;
  width: 50%;
  margin-top: 20rpx;
}
.template {
  padding: 15rpx;
  border-radius: 20rpx;
  background-color: white;
  position: relative;
  width: 300rpx;
  margin: auto;
  image {
    border-radius: 20rpx;
    width: 100%;
    height: 350rpx;
    background-color: white;
  }

  .info {
    margin-top: 8rpx;
    width: 100%;
    .name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: rgba($color: #000000, $alpha: 0.9);
      font-weight: bold;
      font-size: 30rpx;
    }
    .price {
      margin-top: 8rpx;
      color: rgba($color: #ff0000, $alpha: 0.8);
      font-weight: bold;
      font-size: 30rpx;
    }
  }
}
</style>
<style lang="scss">
page {
  background-color: rgba($color: #000000, $alpha: 0.05);
}
</style>
